<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
    <script src="autojs://sdk/v1.js"></script>
    <script src="./js/jquery-3.6.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        /* *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} */
        body{font-family:arial;min-width:320px;max-width:750px;height:100vh;font-size:.32rem;margin:0 auto;padding:0;background:#F1F2E5;color:#333;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);word-wrap:break-word;word-break:break-all}
        /* div{margin:0 auto;padding:0} */
        ul,li,h1,h2,h3,h4,p,dl,dd,dt{margin:0;padding:0;font-weight:normal}
        li{list-style:none}
        a{text-decoration:none}
        img{display:block;width:100%;border:0}

        /* .main button {width: 1.20rem;height: .50rem;} */
        .bottom .start {position:fixed;bottom:0rem;width:7.5rem;height:.68rem;display:block;}
        .titleBar {display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content:space-between;width: 100%;height: 1.2rem;}
        .titleBar img {width: .48rem;height: .48rem;}
        .titleBar .lv_menu  {width: .52rem; height: .48rem; margin-left: .3rem;}
        .titleBar .lv_right {width: .52rem; height: .48rem; margin-right: .3rem;}

        *{margin:0;padding:0}
        #wrapper{width:7.5rem;height:auto;margin:0 auto}
        .mobile{float:left;position:relative;box-shadow:0 0 .25rem 0 rgba(0,0,0,0.5);overflow:hidden}
        #tm{display:none}
        #start{display:none}
        
        .mobile section{background:#F1F2E5;width:7.5rem;height:100vh;position:relative;transition:all 0.45s}
        .mobile section .setting{color:#bb8282;font:bold .26rem Montserrat;text-align:center;border:.02rem solid white;border-radius:.04rem;display:block;padding:.2rem 0;width:60%;position:absolute;left:20%;top:1.5rem;cursor:pointer;text-transform:uppercase}
        .mobile section .start{color:#bb8282;font:bold .26rem Montserrat;text-align:center;border:.02rem solid white;border-radius:.04rem;display:block;padding:.2rem 0;width:60%;position:absolute;left:20%;bottom:1.3rem;cursor:pointer;text-transform:uppercase}
        .mobile section .logecho{color:#bb8282;font:bold .26rem Montserrat;text-align:center;border:.02rem solid white;border-radius:.04rem;display:block;padding:.2rem 0;width:60%;position:absolute;left:20%;top:2.5rem;cursor:pointer;text-transform:uppercase}
        
        .sidenav{background:rgb(50,60,60);width:4.8rem;position:absolute;left:0;top:0;bottom:0;padding-top:1.8rem}
        .sidenav li{color:white;list-style-type:none;display: flex;flex-direction: row;align-items: center;width: 4rem;font-size: .36rem;margin-top: .15rem;}
        .sidenav li a{display: flex;flex-direction: row;align-items: center;}
        .sidenav a{color:white;text-decoration:none}
        .sidenav b{font:bold .26rem/.68rem Montserrat;display:block;opacity:0;transform:translateX(.5rem);transition:all 0.4s;display: flex;flex-direction: row;align-items: center;}
        .sidenav i{display:block;width:.8rem;float:left;font-size:.24rem;line-height:.48rem;text-align:center}

        #tm:checked ~ section {transform: translateX(4.8rem);}
        #tm:checked ~ .sidenav b {opacity: 1; transform: translateX(0);}

        #tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}
        #tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}
        #tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}
        #tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}
        #tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}
        #tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}

        .sidenav b{display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;}
        .sidenav b label{display:block;}
        .sidenav b label,input,select{vertical-align:middle}
        .mui-switch{width:.52rem;height:.31rem;position:relative;border:.01rem solid #dfdfdf;background-color:#fdfdfd;box-shadow:#dfdfdf 0 0 0 0 inset;border-radius:.20rem;border-top-left-radius:.20rem;border-top-right-radius:.2rem;border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem;background-clip:content-box;display:inline-block;-webkit-appearance:none;user-select:none;outline:none}
        .mui-switch:before{content:'';width:.29rem;height:.29rem;position:absolute;top:0;left:0;border-radius:.20rem;border-top-left-radius:.20rem;border-top-right-radius:.20rem;border-bottom-left-radius:.20rem;border-bottom-right-radius:.20rem;background-color:#fff;box-shadow:0 .01rem .03rem rgba(0,0,0,0.4)}
        .mui-switch:checked{border-color:#64bd63;box-shadow:#64bd63 0 0 0 .16rem inset;background-color:#64bd63}
        .mui-switch:checked:before{left:.21rem}
        .mui-switch.mui-switch-anim{transition:border cubic-bezier(0,0,0,1) 0.4s,box-shadow cubic-bezier(0,0,0,1) 0.4s}
        .mui-switch.mui-switch-anim:before{transition:left 0.3s}
        .mui-switch.mui-switch-anim:checked{box-shadow:#64bd63 0 0 0 .16rem inset;background-color:#64bd63;transition:border ease 0.4s,box-shadow ease 0.4s,background-color ease 1.2s}
        .mui-switch.mui-switch-anim:checked:before{transition:left 0.3s}
    </style>
</head>
<body>
    <script type="text/javascript">
        document.documentElement.style.webkitUserSelect = 'none';
        var windowWidth = document.body.clientWidth;
        var _fontSize = windowWidth / 750 * 100;
        var documentHtml = document.getElementsByTagName( 'html' )[ 0 ];
        documentHtml.style.fontSize = _fontSize + 'px';

        var remHtml = document.createElement( 'div' );
        remHtml.className = 'rem-width';
        remHtml.style.width = '1rem';
        remHtml.style.height = '1px';
        remHtml.style.opacity = '0';
        remHtml.style.margin = '0';
        document.body.appendChild( remHtml );
        var remSizeRatio = document.getElementsByClassName( 'rem-width' )[ 0 ].offsetWidth / _fontSize;
        var remSizeNum = document.getElementsByClassName( 'rem-width' )[ 0 ].offsetWidth - _fontSize;
        var remSize = remSizeRatio.toFixed( 2 );
        if( remSize != 1 && Math.abs( remSizeNum ) > 1 ){
            _fontSize = _fontSize / remSizeRatio;
            documentHtml.style.fontSize = _fontSize + 'px';
        }
        document.body.removeChild( document.getElementsByClassName( 'rem-width' )[ 0 ]);
    </script>

    <div class="htmleaf-content bgcolor-8">
        <div id="wrapper">
            <div class="mobile">
                <input type="checkbox" id="tm" />
                <input type="checkbox" id="start" />

                <ul class="sidenav">
                    <li id="accessible">
                        <i class="fa fa-wheelchair"></i>
                        <b>无障碍服务<label><input value="0" class="mui-switch mui-switch-anim" type="checkbox"></label></b>
                    </li>
                    <li id="frontserver">
                        <i class="fa fa-inbox"></i>
                        <b>前台服务<label><input value="0" class="mui-switch mui-switch-anim" type="checkbox"></label></b></li>
                    <li id="logecho">
                        <i class="fa fa-pencil"></i>
                        <b>日志回显<label><input value="0" class="mui-switch mui-switch-anim" type="checkbox"></label></b></li>
                    <li id="setting">
                        <i class="fa fa-cog"></i>
                        <b>脚本设置</b></li>
                    <li id="about">
                        <i class="fa fa-star"></i>
                        <b>关于</b></li>
                    <li id="exit">
                        <i class="fa fa-power-off"></i>
                        <b>退出</b></li>
                </ul>

                <section>
                    <label class="setting" for="tm">Click Me To Setting</label>
                    <label class="logecho" style="display: none;" >Open log view</label>
                    <label class="start" for="start">Start</label>
                </section>
            </div>
        </div>
    </div>

    <script>
        var $jq = jQuery.noConflict();
        $jq( function() {
            if( typeof( Storage ) !== "undefined" ) {
                // 是的! 支持 localStorage  sessionStorage 对象!
                // 一些代码.....
                let status = localStorage.getItem( "logechoStatus" );
                if ( status == "true" ) {
                    $jq( "#logecho b label input" ).prop( "checked", true );
                    $jq( "section .logecho" ).fadeIn( "slow", function() {
                        $jq( "section .logecho" ).css( "display", "block" );
                        $jq( "#logecho b label input" ).attr( "value", 1 );
                    } )
                } else {
                    $jq( "#logecho b label input" ).prop( "checked", false );
                    $jq( "section .logecho" ).fadeOut( "slow", function() {
                        $jq( "section .logecho" ).css( "display", "none" );
                        $jq( "#logecho b label input" ).attr( "value", 0 );
                    } );
                }
            } else {
                // 抱歉! 不支持 web 存储。
                console.log( "不支持本地存储,无法读取." );
            }
            
            //设置无障碍开关和前台服务开关的状态
            $autojs.invoke( "getServiceStatus" ).then( ( s ) => {
                if ( s.access ) {
                    let accessSwitch = $jq( "#accessible b label input" );
                    accessSwitch.prop( "checked", true );
                    accessSwitch.attr( "value", 1 )
                }
                if ( s.foreg ) {
                    let foregSwitch = $jq( "#frontserver b label input" );
                    foregSwitch.prop( "checked", true );
                    foregSwitch.attr( "value", 1 )
                }
            } );

            //点击跳转到日志界面
            $jq( "section .logecho" ).click( function() {
                $autojs.invoke( "show-log" );
            } );

            $jq( ".sidenav li" ).click( function() {
                let liId = $jq( this )[0].id;
                switch ( liId ) {
                    case "accessible" : {
                        let obj = $jq( "#accessible b label input" );
                        let res = switchAlarm( obj );
                        $autojs.invoke( "setAccessibleService", res )
                        break;
                    }
                    case "frontserver" : {
                        let obj = $jq( "#frontserver b label input" );
                        let res = switchAlarm( obj );
                        $autojs.invoke( "setForegroundService", res );
                        break;
                    }
                    case "logecho" : {
                        let obj = $jq( "#logecho b label input" );
                        let res = switchAlarm( obj );
                        if ( res ) {
                            $jq( "#tm" ).prop( "checked", false );
                            $jq( "section .logecho" ).fadeIn( "slow", function() {
                                $jq( "section .logecho" ).css( "display", "block" );
                            } )
                            localStorage.setItem( "logechoStatus", true );
                        } else {
                            $jq( "#tm" ).prop( "checked", false );
                            $jq( "section .logecho" ).fadeOut( "slow", function() {
                                $jq( "section .logecho" ).css( "display", "none" );
                            } );
                            localStorage.setItem( "logechoStatus", false );
                        }
                        break;
                    }
                    case "setting" : {
                        window.location.href = "./html/setting.html"
                        break;
                    }
                    case "about" : {
                        window.location.href = "./html/about.html"
                        break;
                    }
                    case "exit" : {
                        $autojs.invoke( "exit" );
                        break;
                    }
                }
            } );

            //点击主界面,关闭侧边菜单
            $jq( ".mobile section" ).click( function() {
                if ( $jq( "#tm" ).prop( "checked" ) ) {
                    $jq( "#tm" ).prop( "checked", false );
                }
            } );

            //根据页面body的背景色来设置安卓任务栏的颜色
            let bgColor = $jq( "body" ).css( "background-color" );
            $autojs.invoke( "setStatusBarColor", bgColor );

            //点击开始按钮,运行脚本逻辑
            $jq( "section .start" ).click( function() {
                let config = localStorage.getItem( "dataOpt" );
                if ( config ) {
                    configJson = JSON.parse( config );
                    if ( configJson.runTimes == "" )    { tips( "运行时间不可为空" ); return; }
                    if ( configJson.runCounts == "" )   { tips( "运行次数不可为空" ); return; }
                    if ( configJson.msg1 == "" )        { tips( "文本一内容不可为空" ); return; }
                    if ( configJson.msg2 == "" )        { tips( "文本二内容不可为空" ); return; }
                    if ( configJson.msg3 == "" )        { tips( "文本三内容不可为空" ); return; }
                    $autojs.invoke( "runScript", configJson );
                } else {
                    tips( "没有创建配置" );
                    return;
                }
            } );
        } );

        function tips( msg ) {
            $autojs.invoke( "echoToast", msg );
        }
        function switchAlarm( switchObj ) {
            if ( switchObj.attr( "value" ) === "0" ) {
                switchObj.prop( "checked", true );
                switchObj.attr( "value", 1 )
                return true;
            } else {
                switchObj.prop( "checked", false );
                switchObj.attr( "value", 0 )
                return false
            }
        }
    </script>

</body>
</html>